<template>
  <div class="box">
    <!-- 头部 -->
    <header class="header">
      <i class="iconfont icon-zuojiantou left" @click="$router.back()"></i>
      <span>个人信息</span>
    </header>
    <input type="file" name="" hidden id="image" @change="upload" />
    <van-cell title="头像" is-link>
      <label for="image">
        <img :src="userInfo.avatar" alt="" class="imgs"
      /></label>
    </van-cell>
    <van-cell title="昵称" is-link :value="uname" @click="getName" />
    <van-cell title="性别" is-link :value="sex" @click="Sex" />
    <van-cell title="生日" is-link :value="birthdayTime" @click="birthdays" />
    <van-dialog v-model="nameShow" title="请输入昵称" show-cancel-button>
      <van-field label="姓名" placeholder="请输入姓名" v-model="uname" />
    </van-dialog>
    <van-dialog v-model="birthday" title="" show-cancel-button>
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="请选择您的生日"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-dialog>
    <van-dialog v-model="sexshow" title="请选择性别" show-cancel-button>
      <van-radio-group v-model="sex" direction="horizontal" class="sex">
        <van-radio name="男">男</van-radio>
        <van-radio name="女">女</van-radio>
      </van-radio-group>
    </van-dialog>
    <button class="button" @click="commitAuthor">保存</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
import UploadQiniu from "@/utils/UploadQiniu";

export default {
  components: {},
  data() {
    return {
      minDate: new Date(1949, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2001, 0, 17),
      birthdayTime: "",
      nameShow: false,
      birthday: false,
      sexshow: false,
      sex: "",
      date: "",
      uname: "",
      imgUrl: [],
    };
  },
  watch: {
    currentDate() {
      this.birthdayTime = this.currentDate.toLocaleDateString();
    },
  },
  methods: {
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
    getChange() {
      this.activeCureet = false;
    },
    //改变昵称
    getName() {
      this.nameShow = true;
    },
    //改生日日期
    birthdays() {
      this.birthday = true;
    },
    //改变性别
    Sex() {
      this.sexshow = true;
    },
    async upload(e) {
      let fileslist = [...e.target.files].map((v) => {
        return {
          file: v,
        };
      });
      let img = await UploadQiniu(fileslist);
      this.imgUrl = img[0];
    },
    //把昵称传到 vuex中
    async commitAuthor() {
      this.$store.commit("getAuthor", this.uname);
      const result = await this.$http.post("/user/editUserInfo", {
        avatar: this.imgUrl || "",
        nickname: this.uname || "韩老魔",
        sex: this.sex || "18",
        birthday: this.birthdayTime,
        uid: this.author_id,
      });
      // console.log(result);
    },
  },
  computed: {
    ...mapState(["token", "author_id", "userInfo"]),
  },
  async created() {
    const tokens = localStorage.getItem("token");
    const result = await this.$http.post("/user/getuserInfo", {
      token: tokens,
    });
    // console.log(result);
  },
};
</script>
<style lang="less" scoped>
@import url("@/common/change.less");
// 头部
.header {
  display: flex;
  justify-content: center;
  color: #fff;
  // background-color: rgb(35, 190, 35);
  background-color: @color-bgColor;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.left {
  position: absolute;
  font-size: 18px;
  top: 0;
  left: 8px;
}
.imgs {
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  border-radius: 50% 50%;
}
.sex {
  margin-left: 30%;
}
// .list{
//     li{
//         position: relative;
//         width: 100%;
//         padding: 15px;
//         font-size: 14px;
//         border-bottom: 1px dotted rgb(226, 226, 226);
//         .username{
//             display: inline-block;
//             width: 100px;
//             margin: 0;
//             padding: 5px;
//             text-align: right;
//             padding: 15px;
//             position: absolute;
//             font-size: 16px;
//             right: 50px;
//             top: 0;
//         }
//         .imgs{
//             position: absolute;
//             width: 40px;
//             top: 4px;
//             right: 30px;
//             img{
//                 width: 100%;
//             }
//         }
//        .van-cell{
//            width: 80%;
//            height: 44px;
//            padding: 0 0 0 16px;
//            line-height: 50px;
//            span{
//               display: inline-block;
//               width: 270px;
//               text-align: right;
//            }
//        }
//        .date{
//            float: left;
//        }
//        &:last-child{
//            line-height: 50px;
//            padding: 0;
//            height: 50px;
//            padding-left: 16px;
//            .iconfont{
//                position: absolute;
//                top: 0;
//                right: 18px;
//                font-size: 16px;
//            }
//        }
//        .userName{
//            width: 300px;
//            text-align: right;
//        }
//     }
//     .iconfont{
//         font-size: 16px;
//         float: right;
//         color: #333;
//     }
//     .select{
//         width: 50px;
//         border: none;
//         height: 100%;
//         outline: none;
//         float: right;
//         option{
//             text-align: center;
//         }
//     }
// }
.button {
  position: relative;
  background-color: @color-bgColor;
  border: none;
  box-shadow: 1px 1px 5px rgb(202, 200, 200);
  top: 20px;
  left: 12.5%;
  width: 75%;
  height: 46px;
  color: #fff;
}

.active {
  appearance: none;
  &::-ms-expand {
    display: none;
  }
  background: url(../../assets/youjiantou.png) right center no-repeat;
  background-size: 18px;
}
</style>
